Introduction to Oracle's ADF Faces Rich Client Framework

Web 2.0 and Ajax turn out to be increasingly critical when trying to find a JavaServer Faces component suite for the subsequent generation software venture.this article offers a brief creation to Oracle’s ADF Faces rich purchaser, the following generation of ADF Faces, by way of exploring a number of its additives.

The development of ADF Faces is going again to the year 2001, as it began as UIX and have become later, whilst JSF arrived, the ADF Faces library. In 2006 Oracle donated the first generation of ADF Faces to the Apache software foundation and the task is now maintained there below the name Apache MyFaces Trinidad. ADF Faces rich customer (see [adfRich]) is the subsequent generation of ADF Faces and it's far part of the JDeveloper 11g services. you could download the contemporary version of JDeveloper 11g from [jdev11g].

RIA – Rich Net Applications

The ADF Faces rich client Framework (RCF) consists of more than 150 AJAX-enabled JSF additives ([adfComps]), therefore the conclusion of RIA, by means of using JSF, is pretty simple. parent 1 suggests an instance of a very rich person interface, based on RCF:

The library does no longer comprise only UI centric additives it additionally ships various helpers, along with JSF validators and several listeners to export data to Excel, for example. It contains a complete JavaScript API as well. RCF calls for a JSF runtime implementation of the 1.2 model of the specification and it uses internally a number of the APIs, offered by using Apache MyFaces Trinidad 1.2.x ([Trinidad]).

Getting began with RCF

After downloading and installing JDeveloper 11g ([jdev11g]) launch it to create your first ADF Faces project. To do this, click on at the “New application...” button as visible in figure 2:

This opens the wizard of figure 3:

On this wizard we deliver the application a name and we choose the “Fusion net software (ADF)” template for our new task. After carried out this, click finish to generate the assignment. What you purchased is a prepared-to-go mission, in which no extra configuration work is wanted. No need to add the FacesServlet from JSF or the required RenderKit for ADF. The wizard in JDeveloper does all the paintings on your convenience. Figure4 indicates the structure of the generated challenge:

Now we are close to our first ADF Faces based totally JSF web page. To create page pick out the “net content” folder, click on the right mouse button and choose the “New...” item. This gives you the dialog of figure5...

...where you go to the “web Tier” class to “JSF”. After choosing the “JSF web page” object at the proper facet you click on ok.  inside the dialog of figure 6...

...you offer the call of the JSF page and also you choose the the “Create as XML document (*.jspx)” checkbox. This ensures we are becoming the JSPX syntax, which is a XML-based totally JSP dialect. To physically create the page, simply click adequate. you presently get an almost empty JSF web page, (see figure 7):

...which contains two key components the , which renders tags like ,  or  and the  aspect, given that a whole lot of ADF Faces components require a form to work as anticipated. This page has all you need and is ready to take more components. simply drag a element from the “aspect palette” at the right to the principle page, for instance take the “enter Date” issue. Now let’s store and run the web page. To run the web page click on with the proper mouse at the page and pick the “Run” item, as you can see in figure8:

Now JDeveloper is launching the Weblogic server to deploy your application, while geared up you'll see a brand new browser (window) that is poiting in your previously created JSF page. you currently see a completely simple web page, which incorporates one element, the  element. via clicking on the icon a popup is seen, where you may choose a date (figure 9):

This web page does now not have a lot functionality, but take into account how easy and speedy it become to get up to now! With a very few clicks you created a task with a common project structure and were able to launch the page in the Weblogic field.

Oracle ADF Online training course designed for experienced Java developers building 
Oracle 11g ADF (Application Data Framework) applications.

Ajax as a part of the Library

whilst the authentic development of ADF Faces started, there was no name for AJAX, however the necessities in which already there. In ADF Faces (and in Trinidad) the identical technology is called there PPR (Partial web page Rendering). In nearly all case RCF makes use of XHR (XmlHttpRequest) item for its conversation channel, when doing AJAX. The best exception is the report add scenario, due to XHR predicament. however, the framework knows approximately this and the application developer doesn’t need to deal with fileuploads as a unique case, in phrases of Ajax. because the PPR-characteristic is to be had to all additives, some of it use it internally just like the element. when a person is scrolling via a massive set of records, the makes use of PPR to load the asked facts.

the usage of AJAX (or PPR) is sure to 3 critical attributes of the RCF components: autoSubmit, partialSubmit and partialTriggers. If the cost of the autoSubmit attribute, that's available on all implementations of the JSF EditableValueHolder interface, is proper the component sends a PPR request all the way down to the server, whenever there has been a price change:

<af:selectOneRadio
  value="#{bean.value}"
  label="Select One:"
  autoSubmit="true" 
  id="select1">
 <af:selectItem label="First" value="one"/>
 <af:selectItem label="Second" value="two"/>
 <af:selectItem label="Third" value="three"/>
</af:selectOneRadio>

<af:outputText
 partialTriggers="select1"
 value="You've selected: #{bean.value}"/>

Once one of the rendered radio buttons is selected, a PPR postback is send all the way down to the server and the fee of the issue is magically updated. The magic works, because the partialTriggers attribute carries the element-id of the issue, which caused the PPR postback. The partialTriggers attributes can be compared with a listener. In case one of the listed components does cause an AJAX request, the aspect is robotically updated when the response returns from the server. The attribute partialSubmit is just like the autoSubmit attribute, but it's miles simplest to be had on ActionSource-implementations, such as or .

To create a web page, that contains some simple Ajax content, as shown above, we use once more the wizard to create a new JSPX file. however, as you can see in figure 10:

...we choose the default layout that comes in conjunction with JDeveloper 11g. The layout Time rendering after the page has been created looks as if the screenshot of figure 11:

This template file will be deployed together with your net-application and you could use this template as your start line, while growing a common layout that suits your agency’s needs. In this article we are able to hold to use the presented default template. This template has already a few best additives in there, as an instance the  thing. This issue is rotating the photo, when an Ajax request is currently processed, or in different word the server is busy in handling the Ajax request (see figure 12):

Components – Choice is Ideal

As already mentioned the RCF task has lots of components, which leverage Ajax or have already Ajax build-in, like the desk component. The table issue may be used to show shape facts. using the component is just like the use of the same old JSF issue, but it has lots more functions and does no longer need that a whole lot code to create the declarative view. allow’s check a few table code:

<af:table value="#{table.articles}" var="article"
               summary="table that contains some articles">
  <af:column headerText="title" width="140">
    <af:outputText value="#{article.title}" />
  </af:column>
  <af:column headerText="tags" width="140">
    <af:outputText value="#{article.tags}" />
  </af:column>
  <af:column headerText="Writen by" width="140">
    <af:outputText value="#{article.writer.lastname}, #{article.writer.firstname}" />
  </af:column>
</af:table>

That is a completely easy version of the table component. however, when you are already acquainted with JSF you spot which you don’t want to add a for the header. In RCF that is archived via an attribute. below the hood, the aspect does that for you. that is simply one examples how the RCF component assist you to build your applications in a more nature and fast manner.

One of the different functions of the RCF thing is, that is the usage of Ajax to load more information from the server whilst scrolling to the end of the table (see discern thirteen):

You, because the application developer, get this without cost and there may be no more code required. within the vanilla JSF popular table factor you want to write down a special scroller-issue to archive this. you furthermore may should be an Ajax professional if you want to create a similar solution. that is any other vicinity where RCF lets you get your application completed in a brief amount of time.

any other thing to display a one of a kind kind of based data is the issue, as shown in figure 14 or the :

Creating Fancy Layouts

With regards to the action of actually designing an (interactive) consumer interface, there are more things an architect desires to have in mind, than “just” showing the preferred information or a shape to edit the data, that is the layout of the page. Oracle’s ADF Face has several format-orientated components. A simple and first-rate manner to organization some useful links is the combination of the and the additives:

<af:panelHeader text="Good Links">
  <af:panelList>
    <af:goLink text="Oracle" destination="http://www.oracle.com"/>
    <af:goLink text="Apache MyFaces" destination="http://myfaces.apache.org"/>
    <af:goLink text="Tekslate" destination="http://www.tekslate.com"/>
  </af:panelList>
</af:panelHeader>

The result is visible in figure 15:

Another more superior format aspect is the factor, as shown in figure 16:

This component permits you to group distinctive factors in a similar style like you eventually recognise from the Window Explorer, wherein you may enlarge one or extra of those groupings. To construct the sort of rich layout, which is very close to the user experience you realize from native applications, you need something like:

<af:panelAccordion id="sampleAccordion">
  <af:showDetailItem id="firstPane" disclosed="true" inflexibleHeight="50"
                             textAndAccessKey="&First Pane" >
    <af:panelList>
      <af:goLink text="Oracle" destination="http://www.oracle.com"/>
      <af:goLink text="Apache MyFaces" destination="http://myfaces.apache.org"/>
      <af:goLink text="Tekslate" destination="http://www.tekslate.com"/>
    </af:panelList>
  </af:showDetailItem>

  <af:showDetailItem ... />
  <af:showDetailItem ... />
  ...
</af:panelAccordion>

Within the you nest some components. The attributes on the will let you nice-tune placing, like in case you need to permit a couple of “businesses” to be opened at the identical time. One greater element to notice is that the nested thing can be used inside of different components, like the (see figure 17):

AdvancedLayouts with the Menu components

You noticed already that the RCF project has several components that assist you to construct web-applications which have a rich user experience, like ordinary desktop packages do. moving ahead to very wealthy (web-based) user interfaces some thing like a “real” menu, like on windows Explorer, shouldn’t be missing in a web 2.zero library. In RCF there are three components that help you to build cool menus as you can see in figure 18:

The is a container that lets in numerous components as its children. normally you would put a or thing in a . The itself is, as the name shows, the menu. it's far useful to position some components in, to create a hierarchy of menus (see figure 18). It additionally permit the , which is an implementation of the JSF ActionSource interface. This issue can be use to cord a few action to the invocation, similar to you already know from the thing. The exceptional element approximately the element is, that you could invoke it with accelerator keys, e.g. CTRL-N (see figure 18). Isn’t that cool ?

<af:menuBar>
  <af:menu textAndAccessKey="&File">

    <af:menu textAndAccessKey="&New" >
      <af:commandMenuItem textAndAccessKey="Navigator &Window" accelerator="ctrl N" action=”#{someBean.someActionMethod}”/>
       <af:commandMenuItem textAndAccessKey="Navigator &Tab" disabled="true" accelerator="control T"/>
       <af:menu textAndAccessKey="Subway">
         <af:commandMenuItem textAndAccessKey="Veggie delight"/>
         <af:commandMenuItem textAndAccessKey="Froggadile special"/>
       </af:menu>
     </af:menu>
     <af:menu text="File2" />
...
</af:menuBar>

A easy example of a entire with and components is right here: As you see in figure 18, the thing “file”, in that box, contains a (“New”) that consists of components (“New Window” and “New Tab”) and additionally every other issue (“Subway”). This little demo offers already a quite desirable evaluate of what you can do with the three menu-related components, build pretty wealthy and complex menus.

Summary

This article gave a small assessment at the rich consumer revel in you may get whilst the usage of Oracle’s ADF Faces wealthy customer Framework. whilst using RCF, your net-packages afterwards feel a great deal more like a “real” software, as opposed to a “undeniable” internet-software. Of direction, there may be much extra stuff within the RCF issue library, however to cowl each of the components in a fairly particular way, would take a quite complete ebook to do proper. In reality, there are books coming out on JDeveloper11g and ADF Faces. One is written by way of Duncan generators, Paul Dorsey, Peter Koletzke and Avrom Roy-Faderman (see [mills] for more). every other one is written by Frank Nimphius and Lynn Munsinger, and it will likely be referred to as “Oracle Fusion development - building wealthy net programs (RIA) with Oracle ADF and ADF Faces by example”.